/*
 * @Author: your name
 * @Date: 2022-04-13 10:57:46
 * @LastEditTime: 2022-04-25 16:58:56
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \mallAdmin\src\app\sharedModule\commponent\search-bar\search-bar.component.ts
 */
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { DatePipe } from '@angular/common';
// import { ChangeDetectorRef } from '@angular/core';

interface BindKeyLab {
  key: string | number,
  label: string | number
}

interface SearchOptions {
  type: number, // 类型 1：input输入框 2：select下拉选择框 3：时间段选择
  multiple?: boolean, // slect multiple
  selectOptions?: Array<any>, // 下拉选择Options
  selectBindKey?: BindKeyLab, // 下拉选择bind key
  isTimeSelect?: boolean, // 是否为日期选择
  notTostr?: boolean, // 多选是否不转换字符串 默认转换
  labelText: string,
  placeholder?: string,
  valueKey: string | Array<any>,
  value?: string | number | Array<any>,
  hide?: boolean; // 搜索项是否隐藏
  selectChange?: any, // select change
  isSelectSearchLoading?: boolean, // select search loading
  selectSearchChange?: any // select search change
}

@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.component.html',
  styleUrls: ['./search-bar.component.scss'],
  providers: [DatePipe]
})
export class SearchBarComponent implements OnInit {

  @Input() isCollapse: boolean = true;
  @Input() submitTetx: string = '查询';
  @Input() resetTetx: string = '重置';
  @Input() submitLoading: boolean = false;
  @Input() labelFlex: string = '120px';
  @Input() searchOptions!: Array<SearchOptions>;
  @Input() xxlSize: number = 6;

  @Output() onSearch = new EventEmitter();
  @Output() onReset = new EventEmitter();

  // select search
  nzFilterOption = (): boolean => true;

  constructor(
    private datePipe: DatePipe,
    // public changeDetectorRef: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    setTimeout(() => {
      this.submitSearch();
    })
  }

  submitSearch() {
    this.onSearch.emit(this.returnDataFilter(this.searchOptions));
  }

  resetSearch() {
    this.searchOptions.forEach((item: any) => {
      if (this.returnType(item.value) === '[object Array]') {
        item.value = [];
      } else {
        item.value = '';
      }
    })
    this.onReset.emit(this.returnDataFilter(this.searchOptions));
  }

  returnDataFilter(arr: Array<any>) {
    let params: any = {};
    arr.forEach((item: any) => {
      if (this.returnType(item.value) === '[object Array]') {
        // 日期时间段
        if (item.isTimeSelect) {
          item.valueKey.forEach((ele: any, index: number) => {
            params[ele] = item.value.length ? this.datePipe.transform(item.value[index], 'yyyy-MM-dd') : '';
          })
          return
        }

        // 下拉多选转换字符串
        params[item.valueKey] = !item?.notTostr ? item.value.join(',') : item.value;
      } else {
        params[item.valueKey] = item.value;
      }
    })

    return params;
  }

  returnType(val: any) {
    return Object.prototype.toString.call(val);
  }

  defaultChange(val: any) {}
  defaultSelectSearchChange(val: any) {}
}
